<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件</title>
</head>
<body>
<div id="app">
    <my-component warning-text="提示信息"></my-component>
    <input type="text" v-model="parentMessage">
    <my-component :warning-text="parentMessage"></my-component>
    <my-component warning-text="[1,2,3]"></my-component><!--不用v-bind那就是字符串-->
    <my-component :warning-text="[1,2,3]"></my-component><!--用v-bind传递的是数组-->
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>

    /*注册组件*/
    Vue.component('my-component', {
        props: ['warningText'],
        template: '<button @click="counter++" id="add">{{counter}}+{{message}}</button>',
        data: function (){
            return {
                counter: 0,
                message: this.warningText
            };
        }
    });
    var app = new Vue({
        el: '#app',
        data:{
            parentMessage:'我是谁'
        }
    })
</script>
</body>
</html>
